[#include "../../activiti/common/html.ftl" /]
[@html]
    [@head_activiti title="普通流程配置" css=["fw", "ztree-ajax", "step"] /]
    [@body]
        [@formMain ]
            [@layoutPanelRight title="节点信息" icon=""]
                [@dataForm formId="form-node-info" hidden="am-hide"]
                    <input type="hidden" name="key" value="" />
                    <input type="hidden" name="category" value="" />
                    <input type="hidden" name="choice" value="" />
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label class="is-required">节点KEY：</label>
                        <input class="am-form-field am-radius" type="text" name="newKey" required />
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label class="is-required">节点名称：</label>
                        <input class="am-form-field am-radius" type="text" name="text" required />
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label>会签节点：</label>
                        <select class="am-form-field am-radius" name="joinSign">
                            <option value="">-- 请选择 --</option>
                            [#list dict.getType("sys_yes_no") as dict]
                                <option value="${dict.dictValue}">${dict.dictLabel}</option>
                            [/#list]
                        </select>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label>直属领导审批：</label>
                        <select class="am-form-field am-radius" name="isLeader">
                            <option value="">-- 请选择 --</option>
                            [#list dict.getType("sys_yes_no") as dict]
                                <option value="${dict.dictValue}">${dict.dictLabel}</option>
                            [/#list]
                        </select>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label>操作对象（默认）：</label>
                        <select class="am-form-field am-radius" name="obj">
                            <option value="">-- 请选择 --</option>
                            [#list dict.getType("act_re_procdef_obj_type") as dict]
                                <option value="${dict.dictValue}">${dict.dictLabel}</option>
                            [/#list]
                        </select>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12 am-hide">
                        <label>选择人员（默认）：</label>
                        <textarea id="memberUserNames" class="am-form-field am-radius" onclick="selectUsers(this)" rows="2" readonly></textarea>
                    </div>
                    <div class="am-form-group am-form-icon am-u-sm-12 am-u-md-12 am-u-lg-12 am-hide">
                        <label>选择部门（默认）：</label>
                        <i class="am-icon-sitemap" onclick="selectDeptTree()"></i>
                        <input id="treeName" class="am-form-field am-radius" type="text" onclick="selectDeptTree()" readonly/>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label>备注：</label>
                        <textarea class="am-radius" name="remark" rows="3" ></textarea>
                    </div>
                [/@dataForm]
            [/@layoutPanelRight]

            <div class="fw-forms">
                <div class="panel-header" >
                    <div class="title">
                        <label class="am-radio-inline">
                            <input type="radio" name="processType" value="simple" data-url="${ctx}/osfw/activiti/procdef/addSimple" data-am-ucheck checked> 普通流程
                        </label>
                        <label class="am-radio-inline">
                            <input type="radio" name="processType" value="major" data-url="${ctx}/osfw/activiti/procdef/addMajor" data-am-ucheck > 专业流程
                        </label>
                    </div>
                </div>
                [@dataForm formId="form-process-add" ]
                    <input type="hidden" name="category" value="simple" />
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-6">
                        <label class="is-required">流程KEY：</label>
                        <input class="am-form-field am-radius" type="text" name="procKey" data-custom="false" placeholder="配置流程节点后自动生成，也可自定义" required />
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-6">
                        <label class="is-required">流程名称：</label>
                        <input class="am-form-field am-radius" type="text" name="procName" data-custom="false" placeholder="配置流程节点后自动生成，也可自定义" required />
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label class="is-required">流程配置：</label>
                        <div class="am-form-field am-radius">
                            <div id="simple-process" class="steps"></div>
                        </div>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label>流程表单KEY：</label>
                        <input class="am-form-field am-radius" type="text" name="formKey" placeholder="流程自定义表单的KEY或系统已有表单页面的访问地址" />
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label>流程回调业务KEY：</label>
                        <input class="am-form-field am-radius" type="text" name="callbackKey" placeholder="流程节点执行后回调的业务函数或业务API接口" />
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-6 am-hide">
                        <label>是否分享：</label>
                        <select class="am-form-field am-radius" name="shareState" >
                            [#list dict.getType("act_re_procdef_share_state") as dict]
                                <option value="${dict.dictValue}">${dict.dictLabel}</option>
                            [/#list]
                        </select>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-6">
                        <label>是否发布：</label>
                        <select class="am-form-field am-radius" name="params[action]" >
                            [#list dict.getType("sys_yes_no") as dict]
                                [#if dict.dictValue == '0']
                                    <option value="${dict.dictValue}" selected>${dict.dictLabel}</option>
                                [#else ]
                                    <option value="${dict.dictValue}">${dict.dictLabel}</option>
                                [/#if]
                            [/#list]
                        </select>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label>备注：</label>
                        <textarea class="am-form-field am-radius" name="remark" rows="3" ></textarea>
                    </div>
                [/@dataForm]
            </div>

            <div id="menu" hidden>
                <a id="name" class="am-ellipsis" data-menu="name" onclick="" title="节点名称">节点名称</a>
                [#--<a id="edit-step" data-menu="editStep" onclick="">编辑节点</a>--]
                <a id="left-move-step" data-menu="leftMoveStep" onclick="">向前调整</a>
                <a id="right-move-step" data-menu="rightMoveStep" onclick="">向后调整</a>
                <a id="remove-step" data-menu="removeStep" onclick="">删除节点</a>
            </div>
        [/@formMain]

        [@rightToolbar /]

        [@script_activiti js=["fw", "validate", "ztree-ajax", "step"] progress="false" ]
            <script type="text/javascript">
                var data ;
                var statusNode = ${convert.toJson(dict.getType("proj_process_node_task_type"))};
                var prefix = ctx + "osfw/activiti/procdef";

                $(function () {

                    initLayoutRight(false, function (tag) {
                        if(tag == 'indent'){
                            $('.steps').css("width", "calc(100vw - 90px)");
                        }else {
                            $('.steps').css("width", "calc(100vw - 308px)");
                        }
                    });

                    // 步骤流程初始化
                    $.step.init();

                    // 切换流程类型
                    $('input[type=radio][name=processType]').change(function () {
                        $(window.frameElement)[0].src = $(this).data("url");
                    });

                    $("select[name='obj']").change(function () {
                        initOper();
                    });

                    $("#form-node-info").find("input, textarea, radio, checkbox, select").change(function (e) {
                        $.step.editStepCallback($("#form-node-info").serializeObject());
                    });

                    $("#form-process-add").find("input[name=procKey],input[name=procName]").bind('input propertychange', function() {
                        if($.common.isNotEmpty($(this).val())) {
                            $(this).attr("data-custom", "true");
                        }else {
                            $(this).attr("data-custom", "false");
                        }
                    });

                    $('.steps .progressbar:not(li)').on('mousedown',function(e) {
                        $('.steps .progressbar:not(li,a)').css("cursor", "move");
                        var posX = e.pageX;//鼠标点击时候的位置
                        $(document).on('mousemove',function(e) {
                            if(e.pageX < posX) {
                                var posL = e.pageX,//滚动后鼠标的位置
                                    moveX = posL -posX,//鼠标拖动距离
                                    currentScroll = $('.steps').scrollLeft();//当前的scrollLeft值
                                currentScroll += moveX;
                                $('.steps').scrollLeft(-currentScroll);
                            }else {
                                var posL = e.pageX,//滚动后鼠标的位置
                                    moveX = posL -posX,//鼠标拖动距离
                                    currentScroll = $('.steps').scrollLeft();//当前的scrollLeft值
                                currentScroll -= moveX;
                                $('.steps').scrollLeft(currentScroll);
                            }
                        })
                        //清空事件
                        $(document).on('mouseup',function() {
                            $(this).unbind();
                            $('.steps .progressbar:not(li)').css("cursor", "default");
                            return false;
                        })
                    });

                });

                // 初始化
                function initOper() {
                    var $selected = $("select[name=obj]").find('option').filter(function(index) {
                        return this.selected;
                    });
                    var choice = $('input[name=choice]').val();
                    var operNames = "";
                    if($.common.isNotEmpty(choice)) {
                        var choiceArr = $.parseJSON(choice);
                        $.each(choiceArr, function (index, item) {
                            if("01" == $selected.val()) {
                                operNames += item.userName + ",";
                            }else if("02" == $selected.val()) {
                                operNames += item.deptName + ",";
                            }else {
                                operNames = "";
                            }
                        });
                    }
                    if("01" == $selected.val()) {
                        $("#treeName").val("");
                        $("#treeName").parent(".am-form-group").removeClass("am-hide").addClass("am-hide");
                        $("#memberUserNames").text(operNames);
                        $("#memberUserNames").parent(".am-form-group").removeClass("am-hide");

                    }else if("02" == $selected.val()) {
                        $("#treeName").val(operNames);
                        $("#memberUserNames").text("");
                        $("#treeName").parent(".am-form-group").removeClass("am-hide");
                        $("#memberUserNames").parent(".am-form-group").removeClass("am-hide").addClass("am-hide");

                    }else {
                        $("#treeName").val("");
                        $("#treeName").parent(".am-form-group").removeClass("am-hide").addClass("am-hide");
                        $("#memberUserNames").text("");
                        $("#memberUserNames").parent(".am-form-group").removeClass("am-hide").addClass("am-hide");

                    }
                }

                function selectUsers() {
                    var choice = $('input[name=choice]').val();
                    var operIds = "";
                    if($.common.isNotEmpty(choice)) {
                        var $selected = $("select[name=obj]").find('option').filter(function(index) {
                            return this.selected;
                        });
                        var choiceArr = $.parseJSON(choice);
                        $.each(choiceArr, function (index, item) {
                            if("01" == $selected.val()) {
                                operIds += item.userId + ",";
                            } else {
                                operIds = "";
                            }
                        });
                    }
                    choicePersonnel(2, 'userIds='+operIds, 'memberUser');
                }

                $("#form-process-add").validate({
                    rules:{
                        /* 此处设置表单校验规则 */
                        remark: {
                            maxlength: 500
                        },
                        name:{
                            maxlength: 255
                        }
                    },
                    messages: {
                    },
                    onkeyup: false,
                    focusCleanup: true
                });

                function selectUsersCallback(elementId, userIds, loginNames, userNames){
                    console.log(elementId, userIds, loginNames, userNames);
                    if(elementId == 'memberUser'){
                        var userArr = userIds.split(",");
                        if(userArr.length > 60){
                            $.modal.alertWarning("抱歉，最多支持选择六十名人员");
                        }else {
                            var choice = [];
                            $.each(userIds.split(","), function (index, item) {
                                choice.push({userId: item, loginName: loginNames.split(",")[index], userName: userNames.split(",")[index]});
                            });
                            $('input[name=choice]').val(JSON.stringify(choice));
                            $('#'+elementId+'Names').text(userNames);
                        }
                    }else {
                        var choice = [{userId: userIds, loginName: loginNames, userName: userNames}];
                        $('input[name=choice]').val(JSON.stringify(choice));
                        $('#'+elementId+'Name').text(userNames);
                    }
                    $.step.editStepCallback($("#form-node-info").serializeObject());
                }

                function selectDeptTree() {
                    var treeId = $("#treeId").val();
                    var deptId = $.common.isNotEmpty(treeId) ? treeId : 0;
                    var url = ctx + "osfw/system/manage/dept" + "/selectDeptTree/" + deptId;
                    $.modal.open('部门选择', url, "380", "500", doSubmit);
                }

                function doSubmit(index, modalo) {
                    var iframeWin = modalo.find('iframe')[0];
                    var treeId = iframeWin.contentWindow.document.querySelector('#treeId').value;
                    var treeName = iframeWin.contentWindow.document.querySelector('#treeName').value;
                    var choice = [{deptId: treeId, deptName: treeName}];
                    $('input[name=choice]').val(JSON.stringify(choice));
                    $("#treeName").val(treeName);
                    modalo.modal('close');
                    modalo.remove();
                    $.step.editStepCallback($("#form-node-info").serializeObject());
                }

                function clearDeptTree() {
                    $("#treeId").val("0");
                    $("#treeName").val("");
                }

                function submitHandler() {
                    if($.validate.form("form-process-add")) {
                        var fdata = $('#form-process-add').serializeObject();
                        fdata.metaInfo = $.step.toJson();
                        var param = parseParam(fdata);
                        if ($.validate.form()) {
                            $.operate.save(prefix + "/add", param);
                        }
                    }
                }

            </script>
        [/@script_activiti]
    [/@body]
[/@html]